<template>
  <div class="app" v-loading="isLoading">
    <template v-if="myInfo">
      <div class="left">
        <div class="head" v-loading="isUploading">
          <img
            :src="myInfo.user_head"
            @error="myInfo.user_head = noHeadImage"
          />
          <el-upload
            list-type="picture-card"
            :before-upload="beforeUpload"
            :limit="1"
            class="upload"
          >
            <i
              class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-2"
            ></i>
          </el-upload>
        </div>
      </div>
      <div class="right">
        <el-form
          class="form"
          ref="form"
          :rules="rules"
          :model="myInfo"
          size="small"
          label-width="80px"
        >
          <el-form-item label="你的昵称" prop="user_name">
            <el-input
              v-model="myInfo.user_name"
              placeholder="你为自己起的牛逼的名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="user_password">
            <el-input
              v-model="myInfo.user_password"
              placeholder="不修改密码请留空"
            ></el-input>
          </el-form-item>
          <el-form-item label="你的性别" prop="user_sex">
            <el-select
              v-model="myInfo.user_sex"
              placeholder="请选择你的性别"
              class="inline"
            >
              <el-option
                v-for="item in sexList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生年月" prop="user_birth">
            <el-date-picker
              class="inline"
              v-model="myInfo.user_birth"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择你的生日"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="留个签名" prop="user_remark">
            <el-input
              v-model="myInfo.user_remark"
              placeholder="为自己好好吹一次牛逼吧~"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在城市" prop="user_city">
            <el-input
              v-model="myInfo.user_city"
              placeholder="选填,你的所在城市"
            ></el-input>
          </el-form-item>
          <el-form-item label="工作职位" prop="user_job">
            <el-input
              v-model="myInfo.user_job"
              placeholder="如 高级前端工程师"
            ></el-input>
          </el-form-item>
          <el-form-item label="社交链接" prop="user_link">
            <el-input
              v-model="myInfo.user_link"
              placeholder="如Github/Weibo/推特/QQ/微信"
            ></el-input>
          </el-form-item>
          <el-form-item class="submit">
            <el-button type="primary" @click="onSubmit" :loading="isSubmiting"
              >保存资料</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      isSubmiting: false,
      isUploading: false,
      myInfo: false,
      pickerOptions: {
        disabledDate(time){
          return time.getTime() > Date.now();
        },
      },
      noHeadImage: require("@/asset/img/head.jpg"),
      sexList: [
        {
          value: 0,
          label: "小姐姐",
        },
        {
          value: 1,
          label: "小哥哥",
        },
      ],
      rules: {
        user_name: [
          { required: true, message: "请输入你的昵称", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "昵称长度限制为2-64个字符",
            trigger: "blur",
          },
        ],
        user_password: [
          {
            min: 6,
            max: 16,
            message: "密码长度限制为6-16个字符",
            trigger: "blur",
          },
        ],
        user_birth: [
          {
            required: true,
            message: "为什么不告诉我们你多大呢？",
            trigger: "blur",
          },
        ],
        user_remark: [
          {
            max: 64,
            message: "签名最多允许64个字符",
            trigger: "blur",
          },
        ],
        user_city: [
          {
            max: 16,
            message: "签名最多允许16个字符",
            trigger: "blur",
          },
        ],
        user_job: [
          {
            max: 16,
            message: "职位最多允许16个字符",
            trigger: "blur",
          },
        ],
        user_link: [
          {
            max: 32,
            message: "社交链接最多允许32个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getMyInfo();
  },
  methods: {
    beforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error("图片只能是 JPG/PNG/GIF 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
        return false;
      }
      this.blobToDataURL(file);
      return false;
    },
    blobToDataURL(blob) {
      var reader = new FileReader();
      reader.readAsDataURL(blob);
      reader.onload = (e) => {
        //发送之前 处理base64
        const result = e.target.result.replace(/^data:image\/\w+;base64,/, "");
        this.request({
          url: "img/upload",
          method: "POST",
          data: {
            type: "head",
            img: result,
          },
          success: (res) => {
            this.$message.success(res.msg);
            this.getMyInfo();
          },
        });
      };
    },
    getMyInfo() {
      this.isLoading = true;
      this.request({
        url: "user/getMyInfo",
        success: (res) => {
          this.myInfo = res.data;
          this.isLoading = false;
        },
        error: () => {
          this.$emit("api", {
            event: "closeApp",
            app: "profile_modify",
          });
          this.$msgbox({
            type: "error",
            message: "读取你的个人资料失败,请重新登录后再试",
            confirmButtonText: "关闭",
            title: "操作失败",
          });
          return true;
        },
      });
    },
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.isSubmiting = true;
          this.request({
            url: "user/modifyMyInfo",
            method: "POST",
            data: this.myInfo,
            success: (res) => {
              this.$message.success(res.msg);
            },
            final: () => {
              this.isSubmiting = false;
            },
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.inline {
  display: inline !important;
  .el-input__inner {
    display: block !important;
  }
}
.head {
  .upload {
    .el-upload--picture-card {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      line-height: 100px;
      border: none;
      background-color: transparent !important;
      i {
        color: white;
        font-size: 32px;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.inline {
  display: inline !important;
  .el-input__inner {
    display: block !important;
  }
}
.app {
  display: flex;
  height: 100%;
  width: 100%;
  color: #333;
  text-shadow: none;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  .left {
    width: 200px;
    height: 100%;
    background: #fff;
    border-right: 1px solid #f5f5f5;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .head {
      border-radius: 100%;
      overflow: hidden;
      width: 100px;
      height: 100px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .upload {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        backdrop-filter: blur(20px);
        border-radius: 100%;
        overflow: hidden;
      }
    }
  }

  .right {
    height: 100%;
    flex: 1;
    background: #fff;
    position: relative;
    .form {
      padding: 30px 20px 0px 10px;
      .submit {
        text-align: right;
      }
    }
  }
}
</style>